<template>
    <div id="aCoursesList" class="bg-fa of">
        <!-- /课程列表 开始 -->
        <section class="container">
            <header class="comm-title">
                <h2 class="fl tac">
                    <span class="c-333">全部课程</span>
                </h2>
            </header>
            <section class="c-sort-box">
                <section class="c-s-dl">
                    <dl>
                        <dt>
                            <span class="c-999 fsize14">课程类别</span>
                        </dt>
                        <dd class="c-s-dl-li">
                            <ul class="clearfix">
                                <li :class="{current:oneIndex==0}">
                                    <a title="全部" href="#" @click.prevent="selectOne(0)">全部</a>
                                </li>
                                <li
                                    v-for="oneSubject in subjects"
                                    :key="oneSubject.id"
                                    :class="{current:oneIndex==oneSubject.id}"
                                >
                                    <a
                                        :title="oneSubject.label"
                                        href="#"
                                        @click.prevent="selectOne(oneSubject.id)"
                                    >{{oneSubject.label}}</a>
                                </li>
                            </ul>
                        </dd>
                    </dl>
                    <dl>
                        <dt>
                            <span class="c-999 fsize14"></span>
                        </dt>
                        <dd class="c-s-dl-li">
                            <ul class="clearfix">
                                <li
                                    v-for="two in twoSubjects"
                                    :key="two.id"
                                    :class="{current:twoIndex==two.id}"
                                >
                                    <a
                                        :title="two.label"
                                        href="#"
                                        @click.prevent="selectTwo(two.id)"
                                    >{{two.label}}</a>
                                </li>
                            </ul>
                        </dd>
                    </dl>
                    <div class="clear"></div>
                </section>
                <div class="js-wrap">
                    <section class="fr">
                        <span class="c-ccc">
                            <i class="c-master f-fM">1</i>/
                            <i class="c-666 f-fM">1</i>
                        </span>
                    </section>
                    <section class="fl">
                        <ol class="js-tap clearfix">
                            <li :class="{'current bg-orange':threeIndex==1}">
                                <a title="关注度" href="#" @click.prevent="searchAtention()">关注度</a>
                            </li>
                            <li :class="{'current bg-orange':threeIndex==2}">
                                <a title="最新" href="#" @click.prevent="searchGmtCreate()">最新</a>
                            </li>
                            <li :class="{'current bg-orange':threeIndex==3}">
                                <a title="价格" href="#" @click.prevent="searchPrice()">
                                    价格&nbsp;
                                    <span>↓</span>
                                </a>
                            </li>
                        </ol>
                    </section>
                </div>
                <div class="mt40">
                    <!-- /无数据提示 开始-->
                    <section class="no-data-wrap" v-if="total===0">
                        <em class="icon30 no-data-ico">&nbsp;</em>
                        <span class="c-666 fsize14 ml10 vam">没有相关数据，小编正在努力整理中...</span>
                    </section>
                    <!-- /无数据提示 结束-->
                    <article class="comm-course-list">
                        <ul class="of" id="bna">
                            <li v-for="course in courses" :key="course.id">
                                <div class="cc-l-wrap">
                                    <section class="course-img">
                                        <img
                                            :src="course.cover"
                                            class="img-responsive"
                                            :alt="course.title"
                                            style="width:100%;height:180px"
                                        />
                                        <div class="cc-mask">
                                            <a
                                                :href="'/course/'+course.id"
                                                :title="course.title"
                                                class="comm-btn c-btn-1"
                                            >开始学习</a>
                                        </div>
                                    </section>
                                    <h3 class="hLh30 txtOf mt10">
                                        <a
                                            :href="'/course/'+course.id"
                                            :title="course.title"
                                            class="course-title fsize18 c-333"
                                        >{{course.title}}</a>
                                    </h3>
                                    <section class="mt10 hLh20 of">
                                        <span class="fr jgTag bg-green">
                                            <i
                                                class="c-fff fsize12 f-fA"
                                            >{{course.price===0?"免费":"付费"}}</i>
                                        </span>
                                        <span class="fl jgAttr c-ccc f-fA">
                                            <i class="c-999 f-fA">{{course.buyCount}}人学习</i>
                                            |
                                            <i
                                                class="c-999 f-fA"
                                            >{{course.viewCount}}人浏览</i>
                                        </span>
                                    </section>
                                </div>
                            </li>
                        </ul>
                        <div class="clear"></div>
                    </article>
                </div>
                <!-- 公共分页 开始 -->
                <div>
                    <div class="paging">
                        <el-pagination
                            background
                            layout="total, prev, pager, next"
                            :total="total"
                            :page-size="8"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>
                <!-- 公共分页 结束 -->
            </section>
        </section>
        <!-- /课程列表 结束 -->
    </div>
</template>
<script>
import { getSubject } from "@/api/course/subject";
import { pageCourse } from "@/api/course/course";
export default {
    data() {
        return {
            subjects: [],
            twoSubjects: [],
            pageCourseVo: {
                title: "",
                subjectId: "",
                subjectParentId: "",
                status: "Normal",
                isContainChapter: false,
                isContainComment: false,
            },
            total: 0,
            current: 1,
            courses: [],
            oneIndex: 0,
            twoIndex: "",
            threeIndex: 1,
        };
    },
    computed: {
        vuexSeach() {
            return this.$store.state.search;
        },
    },
    watch: {
        vuexSeach: {
            immediate: true,
            handler(newValue, oldValue) {
                this.pageCourseVo.title = newValue;
                this.pageCourse();
            },
        },
    },
    methods: {
        //一级分类变化时
        selectOne(val) {
            this.oneIndex = val;
            if (val == 0) {
                this.pageCourseVo.subjectParentId = "";
                this.twoSubjects = [];
            } else {
                this.pageCourseVo.subjectParentId = val;
                for (let i = 0; i < this.subjects.length; i++) {
                    if (this.subjects[i].id == val) {
                        this.twoSubjects = this.subjects[i].children;
                        break;
                    }
                }
            }
            this.twoIndex = "";
            this.pageCourseVo.subjectId = "";
            this.pageCourse();
        },
        selectTwo(val) {
            this.twoIndex = val;
            this.pageCourseVo.subjectId = val;
            this.pageCourse();
        },

        handleCurrentChange(val) {
            this.pageCourse(val);
        },
        getSubject() {
            getSubject().then((response) => {
                this.subjects = response.data.cateGoryTree;
            });
        },
        pageCourse(page = 1) {
            this.current = page;
            pageCourse(this.pageCourseVo, this.current, 8).then((response) => {
                this.courses = response.data.courses;
                this.total = response.data.rows;
                this.searchAtention();
            });
        },
        init() {
            this.getSubject();
            this.pageCourse();
        },
        //关注度
        searchAtention() {
            this.threeIndex = 1;
            this.courses.sort(function (a, b) {
                return b.viewCount - a.viewCount;
            });
        },
        //最新查询
        searchGmtCreate() {
            this.threeIndex = 2;
            this.courses.sort(function (a, b) {
                return b.gmtCreate - a.gmtCreate;
            });
        },
        //价格查询
        searchPrice() {
            this.threeIndex = 3;
            this.courses.sort(function (a, b) {
                return a.price - b.price;
            });
        },
    },
    created() {
        this.init();
    },
};
</script>